﻿<div [@routerTransition]>
  <div class="m-subheader">
    <div class="row align-items-center">
      <div class="mr-auto col-sm-12 col-md-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>{{ l("VisualSettings") }}</span>
        </h3>
        <span class="m-section__sub">
          {{ l("UiCustomizationHeaderInfo") }}
        </span>
      </div>
      <div class="col-sm-12 col-md-6 text-right">
        <button
          *ngIf="isGranted('Pages.Administration.UiCustomization')"
          (click)="updateDefaultUiManagementSettings()"
          class="btn btn-primary"
        >
          <i class="fa fa-floppy-o"></i> {{ l("SaveAsSystemDefault") }}
        </button>
        <button
          *ngIf="!isGranted('Pages.Administration.UiCustomization')"
          (click)="updateUiManagementSettings()"
          class="btn btn-primary"
        >
          <i class="fa fa-floppy-o"></i> {{ l("Save") }}
        </button>
        <button
          *ngIf="!isGranted('Pages.Administration.UiCustomization')"
          (click)="useSystemDefaultSettings()"
          class="btn btn-metal"
        >
          {{ l("UseSystemDefaults") }}
        </button>
      </div>
    </div>
  </div>
  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body">
        <tabset class="tab-container tabbable-line" *ngIf="settings">
          <tab
            heading="{{ l('UiCustomization_Layout') }}"
            customClass="m-tabs__item"
          >
            <form id="LayoutSettingsForm">
              <div class="m-radio-list m--margin-bottom-20">
                <label>{{ l("UiCustomization_Theme") }}</label>
                <label class="m-radio" for="Theme_Default">
                  <input
                    id="Theme_Default"
                    name="Theme"
                    [(ngModel)]="settings.layout.theme"
                    value="default"
                    type="radio"
                    [checked]="settings.layout.theme === 'default'"
                  />
                  {{ l("Default") }}
                  <span></span>
                </label>
                <label
                  class="m-radio m-radio--solid m-radio--state-info"
                  for="Theme_Blue"
                >
                  <input
                    id="Theme_Blue"
                    name="Theme"
                    [(ngModel)]="settings.layout.theme"
                    value="blue"
                    type="radio"
                    [checked]="settings.layout.theme === 'blue'"
                  />
                  {{ l("Blue") }}
                  <span></span>
                </label>
                <label
                  class="m-radio m-radio--solid m-radio--state-success"
                  for="Theme_Green"
                >
                  <input
                    id="Theme_Green"
                    name="Theme"
                    [(ngModel)]="settings.layout.theme"
                    value="green"
                    type="radio"
                    [checked]="settings.layout.theme === 'green'"
                  />
                  {{ l("Green") }}
                  <span></span>
                </label>
                <label
                  class="m-radio m-radio--solid m-radio--state-danger"
                  for="Theme_Pink"
                >
                  <input
                    id="Theme_Pink"
                    name="Theme"
                    [(ngModel)]="settings.layout.theme"
                    value="pink"
                    type="radio"
                    [checked]="settings.layout.theme === 'pink'"
                  />
                  {{ l("Pink") }}
                  <span></span>
                </label>
                <label
                  class="m-radio m-radio--solid m-radio--state-warning"
                  for="Theme_Yellow"
                >
                  <input
                    id="Theme_Yellow"
                    name="Theme"
                    [(ngModel)]="settings.layout.theme"
                    value="yellow"
                    type="radio"
                    [checked]="settings.layout.theme === 'yellow'"
                  />
                  {{ l("Yellow") }}
                  <span></span>
                </label>
                <label
                  class="m-radio m-radio--solid m-radio--state-black"
                  for="Theme_Black"
                >
                  <input
                    id="Theme_Black"
                    name="Theme"
                    [(ngModel)]="settings.layout.theme"
                    value="black"
                    type="radio"
                    [checked]="settings.layout.theme === 'black'"
                  />
                  Black
                  <span></span>
                </label>
              </div>

              <div class="form-group m-form__group">
                <label for="LayoutType">{{
                  l("UiCustomization_LayoutType")
                }}</label>
                <select
                  id="LayoutType"
                  name="LayoutType"
                  class="form-control"
                  [(ngModel)]="settings.layout.layoutType"
                >
                  <option value="fluid">
                    {{ l("UiCustomization_Fluid") }}
                  </option>
                  <option value="boxed">
                    {{ l("UiCustomization_Boxed") }}
                  </option>
                </select>
              </div>
              <div class="form-group m-form__group">
                <label for="ContentSkin">{{
                  l("UiCustomization_ContentSkin")
                }}</label>
                <select
                  id="ContentSkin"
                  name="ContentSkin"
                  class="form-control"
                  [(ngModel)]="settings.layout.contentSkin"
                >
                  <option value="light2">
                    {{ l("UiCustomization_LightGrey") }}
                  </option>
                  <option value="light">
                    {{ l("UiCustomization_White") }}
                  </option>
                </select>
              </div>
            </form>
          </tab>
          <tab
            heading="{{ l('UiCustomization_Header') }}"
            customClass="m-tabs__item"
          >
            <form id="HeaderSettingsForm">
              <h5>{{ l("UiCustomization_Desktop") }}</h5>
              <div class="form-group m-form__group">
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="DesktopFixedHeader"
                    [(ngModel)]="settings.header.desktopFixedHeader"
                  />
                  {{ l("UiCustomization_DesktopFixedHeader") }}
                  <span></span>
                </label>
              </div>
              <div class="form-group m-form__group">
                <label for="DesktopMinimizeMode">{{
                  l("UiCustomization_DesktopMinimizeMode")
                }}</label>
                <select
                  id="DesktopMinimizeMode"
                  name="DesktopMinimizeMode"
                  class="form-control"
                  [(ngModel)]="settings.header.desktopMinimizeMode"
                >
                  <option value="">{{ l("UiCustomization_None") }}</option>
                  <option value="hide">{{ l("UiCustomization_Hide") }}</option>
                </select>
              </div>
              <div class="form-group m-form__group">
                <label for="HeaderSkin">{{
                  l("UiCustomization_HeaderSkin")
                }}</label>
                <select
                  id="HeaderSkin"
                  name="HeaderSkin"
                  class="form-control"
                  [(ngModel)]="settings.header.headerSkin"
                >
                  <option value="light">
                    {{ l("UiCustomization_Light") }}
                  </option>
                  <option value="dark">{{ l("UiCustomization_Dark") }}</option>
                </select>
              </div>
              <div class="form-group m-form__group">
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="DisplaySubmenuArrowDesktop"
                    [(ngModel)]="settings.header.displaySubmenuArrowDesktop"
                  />
                  {{ l("UiCustomization_DisplaySubmenuArrowDesktop") }}
                  <span></span>
                </label>
              </div>

              <h5>{{ l("UiCustomization_Mobile") }}</h5>
              <div class="form-group m-form__group">
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="MobileFixedHeader"
                    [(ngModel)]="settings.header.mobileFixedHeader"
                  />
                  {{ l("UiCustomization_MobileFixedHeader") }}
                  <span></span>
                </label>
              </div>
            </form>
          </tab>
          <tab
            heading="{{ l('UiCustomization_Menu') }}"
            customClass="m-tabs__item"
          >
            <form id="MenuSettingsForm">
              <div class="form-group m-form__group">
                <label for="Position">{{
                  l("UiCustomization_MenuPosition")
                }}</label>
                <select
                  id="Position"
                  name="Position"
                  class="form-control"
                  [(ngModel)]="settings.menu.position"
                >
                  <option value="left">{{ l("UiCustomization_Left") }}</option>
                  <option value="top">{{ l("UiCustomization_Top") }}</option>
                </select>
              </div>
              <div class="form-group m-form__group">
                <label for="AsideSkin">{{
                  l("UiCustomization_MenuSkin")
                }}</label>
                <select
                  id="AsideSkin"
                  name="AsideSkin"
                  class="form-control"
                  [(ngModel)]="settings.menu.asideSkin"
                >
                  <option value="light">
                    {{ l("UiCustomization_Light") }}
                  </option>
                  <option value="dark">{{ l("UiCustomization_Dark") }}</option>
                </select>
              </div>
              <div
                class="form-group m-form__group"
                *ngIf="leftMenuPositionSelected()"
              >
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="FixedAside"
                    [(ngModel)]="settings.menu.fixedAside"
                  />
                  {{ l("UiCustomization_FixedMenu") }}
                  <span></span>
                </label>
              </div>
              <div
                class="form-group m-form__group"
                *ngIf="leftMenuPositionSelected()"
              >
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="AllowAsideMinimizing"
                    [(ngModel)]="settings.menu.allowAsideMinimizing"
                    (ngModelChange)="allowAsideMinimizingChange($event)"
                  />
                  {{ l("UiCustomization_AllowAsideMinimizing") }}
                  <span></span>
                </label>
              </div>
              <div
                class="form-group m-form__group"
                *ngIf="leftMenuPositionSelected()"
              >
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="DefaultMinimizedAside"
                    [(ngModel)]="settings.menu.defaultMinimizedAside"
                    [(disabled)]="!settings.menu.allowAsideMinimizing"
                  />
                  {{ l("UiCustomization_DefaultMinimizedAside") }}
                  <span></span>
                </label>
              </div>
              <div
                class="form-group m-form__group"
                *ngIf="leftMenuPositionSelected()"
              >
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="AllowAsideHiding"
                    [(ngModel)]="settings.menu.allowAsideHiding"
                    [(disabled)]="settings.menu.allowAsideMinimizing"
                    (ngModelChange)="allowAsideHidingChange($event)"
                  />
                  {{ l("UiCustomization_AllowAsideHiding") }}
                  <span></span>
                </label>
              </div>
              <div
                class="form-group m-form__group"
                *ngIf="leftMenuPositionSelected()"
              >
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="DefaultHiddenAside"
                    [(ngModel)]="settings.menu.defaultHiddenAside"
                    [(disabled)]="!settings.menu.allowAsideHiding"
                  />
                  {{ l("UiCustomization_DefaultHiddenAside") }}
                  <span></span>
                </label>
              </div>
              <div
                class="form-group m-form__group"
                *ngIf="leftMenuPositionSelected()"
              >
                <label for="SubmenuToggle">{{
                  l("UiCustomization_SubmenuToggle")
                }}</label>
                <select
                  id="SubmenuToggle"
                  name="SubmenuToggle"
                  class="form-control"
                  [(ngModel)]="settings.menu.submenuToggle"
                >
                  <option value="dropdown">
                    {{ l("UiCustomization_Dropdown") }}
                  </option>
                  <option value="accordion">
                    {{ l("UiCustomization_Accordion") }}
                  </option>
                </select>
              </div>
              <div
                class="form-group m-form__group"
                *ngIf="leftMenuPositionSelected()"
              >
                <label for="DropdownSubmenuSkin">{{
                  l("UiCustomization_DropdownSubmenuSkin")
                }}</label>
                <select
                  id="DropdownSubmenuSkin"
                  name="DropdownSubmenuSkin"
                  class="form-control"
                  [(ngModel)]="settings.menu.dropdownSubmenuSkin"
                >
                  <option value="inherit">
                    {{ l("UiCustomization_Inherit") }}
                  </option>
                  <option value="light">
                    {{ l("UiCustomization_Light") }}
                  </option>
                  <option value="dark">{{ l("UiCustomization_Dark") }}</option>
                </select>
              </div>
              <div
                class="form-group m-form__group"
                *ngIf="leftMenuPositionSelected()"
              >
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="DropdownSubmenuArrow"
                    [(ngModel)]="settings.menu.dropdownSubmenuArrow"
                  />
                  {{ l("UiCustomization_DropdownSubmenuArrow") }}
                  <span></span>
                </label>
              </div>
            </form>
          </tab>
          <tab
            heading="{{ l('UiCustomization_Footer') }}"
            customClass="m-tabs__item"
          >
            <form id="FooterSettingsForm">
              <div class="form-group m-form__group">
                <label class="m-checkbox col-lg-12">
                  <input
                    type="checkbox"
                    name="FixedFooter"
                    [(ngModel)]="settings.footer.fixedFooter"
                  />
                  {{ l("UiCustomization_FixedFooter") }}
                  <span></span>
                </label>
              </div>
            </form>
          </tab>
        </tabset>
      </div>
    </div>
  </div>
</div>
